<template>
  <div>
    <el-dialog
      :title="model.id ? '修改信息' : '新增信息'"
      :visible.sync="showModal"
      width="800"
      center
      :close-on-click-modal="false"
    >
      <el-form :model="model" :rules="rules" ref="ruleForm" label-width="115px" class="demo-ruleForm el-form-col">
        <el-row v-if="operator === 0">
          <el-col :span="8">
            <el-form-item label="姓名:">
              <el-autocomplete
                class="inline-input"
                v-model="searchWorker"
                :fetch-suggestions="querySearch"
                placeholder="请输入师傅名称"
                :trigger-on-focus="false"
                @select="handleSelect"
              ></el-autocomplete>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名:" prop="pickingName">
              <el-input v-model="model.pickingName" :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登录账号:" prop="logAccount">
              <el-input v-model="model.logAccount" :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拣货类型:" prop="pickingType">
              <el-select v-model="model.pickingType" placeholder="请选择">
                <el-option v-for="item in pickingTypeArr"
                           :key="item.value"
                           :label="item.text"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hide">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getSubDictListOfParentCode} from '@/utils/selectOptions'
import {copy} from '@/utils'
export default {
  name: 'workerModal',
  components: {},
  data() {
    return {
      detail: {},
      showModal: false,
      loading: false,
      searchWorker: '',
      isIndeterminate: false,
      model: {
        pickingName: '',
        logAccount: '',
        pickingType: ''
      },
      pickingTypeArr: [],
      rules: {
        pickingName: [
          { required: true, message: '请选择师傅', trigger: 'change' }
        ],
        logAccount: [
          { required: true, message: '请选择师傅', trigger: 'change' }
        ],
        pickingType: [
          { required: true, message: '请选择拣货类型', trigger: 'change' }
        ]
      },
      operator: 0 // 0 新增 1 修改
    }
  },
  created() {
    getSubDictListOfParentCode('PICKUPTYPE').then(arr => {
      this.pickingTypeArr = arr
    })
  },
  watch: {},
  methods: {
    show(data) {
      this.showModal = true
      this.$nextTick(_ => {
        this.$refs['ruleForm'].resetFields()
        this.clear()
        if (data) {
          this.operator = 1
          this.model.pickingName = data.name
          this.model.logAccount = data.phone
          this.model.pickingType = data.pickingType
          this.model.id = data.id
        }
      })
    },
    hide() {
      this.showModal = false
    },
    clear() {
      this.loading = false
      this.searchWorker = ''
      this.model.id = ''
    },
    handleSelect(item) {
      this.model.pickingName = item.workerName
      this.model.logAccount = item.logAccount
      this.model.id = item.workerId
    },
    querySearch(queryString, cb) {
      this.getWorker(queryString).then(response => {
        response.forEach(item => {
          // 映射
          item.workerName = item.workerName || item.name
          item.workerId = item.workerId || item.userId
          item.logAccount = item.logAccount || item.registerPhone
          item.value = item.workerName
        })
        cb(response)
      })
    },
    getWorker(val) {
      return this.$ajax.get('/ms-warehouse-order/resourceManage/selectWorkers', {name: val, mark: 5}).then(response => {
        return (response.data || [])
      })
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        }
        let data = copy(this.model, true)
        if (this.operator === 1) {
          data.operation = 'update'
        } else {
          data.operation = 'insert'
        }
        this.loading = true
        this.$ajax.post('/ms-warehouse-order/resourceManage/operatePicking', data).then(response => {
          this.loading = false
          if (response.success) {
            this.hide()
            this.$emit('refresh')
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          }
        })
      })
    }
  }
}
</script>
